<div id="js-chat-contact" class="flex-wrap position-relative slide-on-mobile slide-on-mobile-left border-faded border-left-0 border-top-0 border-bottom-0">
	<div class="d-flex flex-column bg-faded position-absolute pos-top pos-bottom w-100">
		<div class="px-3 py-4">
			<input type="text" class="form-control bg-white" placeholder="Search key words">
		</div>
		<div class="flex-1 h-100 custom-scrollbar">
			<div class="w-100">
				<div class="nav-title m-0 px-3 text-muted">Chat History</div>
				<ul class="list-unstyled m-0">
					<li>
						<div class="d-flex w-100 px-3 py-2 text-dark hover-white cursor-pointer show-child-on-hover">
							<div class="profile-image-md rounded-circle" style="background-image:url('/Content/img/demo/avatars/avatar-d.png'); background-size: cover;"></div>
							<div class="px-2 flex-1">
								<div class="text-truncate text-truncate-md">
									Tracey Chang
									<small class="d-block text-muted text-truncate text-truncate-md">
										2020-01-31 
									</small>
								</div>
							</div>
							<div class="position-absolute pos-right mt-2 mr-3 show-on-hover-parent">
								<button class="btn btn-danger btn-xs btn-icon rounded-circle shadow-0" data-toggle="tooltip" data-template="<div class=&quot;tooltip&quot; role=&quot;tooltip&quot;><div class=&quot;tooltip-inner bg-danger-500&quot;></div></div>" data-original-title="Delete">
									<i class="fal fa-trash-alt"></i>
								</button>
							</div>
						</div>
					</li>
					<li>
						<div class="d-flex w-100 px-3 py-2 text-dark hover-white cursor-pointer show-child-on-hover">
							<div class="profile-image-md rounded-circle" style="background-image:url('/Content/img/demo/avatars/avatar-b.png'); background-size: cover;"></div>
							<div class="px-2 flex-1">
								<div class="text-truncate text-truncate-md">
									Oliver Kopyuv
									<small class="d-block text-muted text-truncate text-truncate-md">
										2019-03-15 
									</small>
								</div>
							</div>
							<div class="position-absolute pos-right mt-2 mr-3 show-on-hover-parent">
								<button class="btn btn-danger btn-xs btn-icon rounded-circle shadow-0" data-toggle="tooltip" data-template="<div class=&quot;tooltip&quot; role=&quot;tooltip&quot;><div class=&quot;tooltip-inner bg-danger-500&quot;></div></div>" data-original-title="Delete">
									<i class="fal fa-trash-alt"></i>
								</button>
							</div>
						</div>
					</li>
					<li>
						<div class="d-flex w-100 px-3 py-2 text-dark hover-white cursor-pointer show-child-on-hover">
							<div class="profile-image-md rounded-circle" style="background-image:url('/Content/img/demo/avatars/avatar-e.png'); background-size: cover;"></div>
							<div class="px-2 flex-1">
								<div class="text-truncate text-truncate-md">
									Dr. John Cook PhD
									<small class="d-block text-muted text-truncate text-truncate-md">
										2023-05-27 
									</small>
								</div>
							</div>
							<div class="position-absolute pos-right mt-2 mr-3 show-on-hover-parent">
								<button class="btn btn-danger btn-xs btn-icon rounded-circle shadow-0" data-toggle="tooltip" data-template="<div class=&quot;tooltip&quot; role=&quot;tooltip&quot;><div class=&quot;tooltip-inner bg-danger-500&quot;></div></div>" data-original-title="Delete">
									<i class="fal fa-trash-alt"></i>
								</button>
							</div>
						</div>				
					</li>
					<li>
						<div class="d-flex w-100 px-3 py-2 text-dark hover-white cursor-pointer show-child-on-hover">
							<div class="profile-image-md rounded-circle" style="background-image:url('/Content/img/demo/avatars/avatar-g.png'); background-size: cover;"></div>
							<div class="px-2 flex-1">
								<div class="text-truncate text-truncate-md">
									Ali Amdaney
									<small class="d-block text-muted text-truncate text-truncate-md">
										2023-06-11 
									</small>
								</div>
							</div>
							<div class="position-absolute pos-right mt-2 mr-3 show-on-hover-parent">
								<button class="btn btn-danger btn-xs btn-icon rounded-circle shadow-0" data-toggle="tooltip" data-template="<div class=&quot;tooltip&quot; role=&quot;tooltip&quot;><div class=&quot;tooltip-inner bg-danger-500&quot;></div></div>" data-original-title="Delete">
									<i class="fal fa-trash-alt"></i>
								</button>
							</div>
						</div>
					</li>
				</ul>
				<div class="nav-title px-3 text-muted">Missed calls</div>
				<ul class="list-unstyled m-0">
					<li>
						<div class="d-flex w-100 px-3 py-2 text-dark hover-white cursor-pointer show-child-on-hover">
							<div class="profile-image-md rounded-circle" style="background-image:url('/Content/img/demo/avatars/avatar-m.png'); background-size: cover;"></div>
							<div class="px-2 flex-1">
								<div class="text-truncate text-truncate-md">
									+714651347790
									<small class="d-block font-italic fs-xs opacity-50">
										Missed Call 
									</small>
								</div>
							</div>
							<div class="position-absolute pos-right mt-2 mr-3 show-on-hover-parent">
								<button class="btn btn-success btn-xs btn-icon rounded-circle shadow-0" data-toggle="tooltip" data-template="<div class=&quot;tooltip&quot; role=&quot;tooltip&quot;><div class=&quot;tooltip-inner bg-success-500&quot;></div></div>" data-original-title="Play voicemail">
									<i class="fal fa-play"></i>
								</button>
								<button class="btn btn-info btn-xs btn-icon rounded-circle shadow-0" data-toggle="tooltip" data-template="<div class=&quot;tooltip&quot; role=&quot;tooltip&quot;><div class=&quot;tooltip-inner bg-info-500&quot;></div></div>" data-original-title="Call back">
									<i class="fal fa-phone"></i>
								</button>
							</div>
						</div>
					</li>
					<li>
						<div class="d-flex w-100 px-3 py-2 text-dark hover-white cursor-pointer show-child-on-hover">
							<div class="profile-image-md rounded-circle" style="background-image:url('/Content/img/demo/avatars/avatar-m.png'); background-size: cover;"></div>
							<div class="px-2 flex-1">
								<div class="text-truncate text-truncate-md">
									+13471349199
									<small class="d-block font-italic fs-xs opacity-50">
										Ended in 32 minutes
									</small>
								</div>
							</div>
							<div class="position-absolute pos-right mt-2 mr-3 show-on-hover-parent">
								<button class="btn btn-info btn-xs btn-icon rounded-circle shadow-0" data-toggle="tooltip" data-template="<div class=&quot;tooltip&quot; role=&quot;tooltip&quot;><div class=&quot;tooltip-inner bg-info-500&quot;></div></div>" data-original-title="Call back">
									<i class="fal fa-phone"></i>
								</button>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="slide-backdrop" data-action="toggle" data-class="slide-on-mobile-left-show" data-target="#js-chat-contact"></div> 